<template>
  <com-el-dialog-ex
    title="分配角色"
    v-model:visible="visible"
    @confirm="submitForm"
    @cancel="closed"
  >
    <div v-loading="isBusy" element-loading-text="加载中...">
      <el-table
        border
        stripe
        width="100%"
        max-height="calc(100vh - 350px)"
        header-cell-class-name="tableHeaderRow"
        :data="tableDatas"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column header-align="center" prop="number" label="角色" width="480" />
      </el-table>
    </div>
  </com-el-dialog-ex>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import ComElDialogEx from '@/components/com-el-dialog-ex/com-el-dialog-ex.vue'
import type { PageModel } from '@/common/model/app/page_model'
import type { UserInfo } from '@/common/model/app_server/outputs/user_info'
import type { RoleInfo } from '@/common/model/app_server/outputs/role_info'

defineOptions({
  name: 'RelateRoleView',
})

//region # 属性

// 应用实例
const { proxy }: any = getCurrentInstance()

// 显示状态
const visible = defineModel('visible', {
  type: Boolean,
  required: true,
  default: false,
})

// 是否繁忙
const isBusy = ref(false)

// 表格数据列表
const tableDatas = ref<Array<any>>()

// 组件事件列表
const emits = defineEmits(['closed'])

//endregion

//region # Hooks

//endregion

//region # 方法

// Action

/**
 * 加载数据
 * */
const loadData = async () => {
  isBusy.value = true
  const roles: PageModel<RoleInfo> = await proxy.$api.role.getRoles(null, null)
  tableDatas.value = new Array<RoleInfo>()
  for (let i = 0; i < roles.datas.length; i++) {
    tableDatas.value.push({
      // id: users.datas[i].id,
      // number: users.datas[i].number,
      // name: users.datas[i].name,
      // enabled: proxy.$enumFilters.enabledFilter(users.datas[i].enabled),
      // addedTime: users.datas[i].addedTime,
    })
  }
  setTimeout(() => {
    isBusy.value = false
  }, 200)
}

/**
 * 提交
 * */
const submitForm = async () => {}

/**
 * 重置表单
 * */
const closed = () => {
  tryClose(false)
}

/**
 * 尝试关闭
 * @param result - 结果
 * */
const tryClose = (result: boolean) => {
  visible.value = false
  emits('closed', result)
}

//endregion

//region # 事件

/**
 * 加载完毕
 * */
onMounted(async () => {})
//endregion
</script>

<style scoped>
@import 'RelateRoleView.less';
</style>
